<template>
	<view class="container">
			<custom_navbar :title="navbar_title" theme="light" />
			<view class="form">
			<!--input box start-->
			    <view class='input_box'>
			      <view class='i_box_1'>我的头像</view>
			      <view class='i_box_2'></view>
			      <view class='i_box_3'>
			       
			      </view>
			      <view class='i_box_4'></view>
			        <view class='i_box_5'>
					  <view class="up"> 	
						  <view class="img">	
						  <u-upload
								
								:fileList="wxAvatar"
									@afterRead="afterRead"
									@delete="deletePic"
									name="avatar"
									width="26"
									height="26"
									:sizeType="['compressed']"
									:deletable="true"
									:maxCount="1"
									:previewFullImage="false"
							>
				
							</u-upload>
						 </view>
						 <view class="icon" @click="clearImg">
							<u-icon name="arrow-right" top="5"></u-icon>
						 </view>
					 </view>	 
			      </view>
			    </view>
		 <!--input box end-->
		 
		 
		 <!--input box start-->
		 			    <view class='input_box'>
		 			      <view class='i_box_1'>我的昵称</view>
		 			      <view class='i_box_2'></view>
		 			      <view class='i_box_3x'>
		 			       <u--input
		 			           placeholder="请输入昵称"
							   inputAlign="right"
							   border="none"
							   maxlength="20"
		 			           v-model="info.nick_name"
							   suffixIcon="arrow-right"
							   suffixIconStyle="color: #909399"
							   @change="infoChange"
		 			         ></u--input>
		 			      </view>
						  
		 	
		 			    </view>
		 <!--input box end-->
		 

			
		</view>	
		
		
	</view>
</template>

<script>
	import { getUserInfo,updateUserInfo } from "@/api/home.js";
	import custom_navbar from "@/components/custom_navbar/index.vue";
	import store from "@/store";
	import { ossurl, photoUploadFile, getImgInfo, compressImg } from '@/utils/index';
	
	export default {
		components: { custom_navbar },
		data() {
			return {
				navbar_title: "设置",
				//form框
				   info: {
						 nick_name:'',
				         avatar:'',

				   },
				   wxAvatar:  [],
		
				 
			}
		},
		onLoad(option) {
			var _this = this;
			getUserInfo().then(res => {
				if (res.code != 200) {
							uni.$u.toast(res.msg);
				}
				else
				{
					var data = res.data;
					console.log('userInfo',data);
					_this.info = data;
					if(!uni.$u.test.isEmpty(data.avatar))
					{
						_this.wxAvatar = [{url:ossurl(data.avatar, 'user_face')}];
					}
					
				}
			});
		
		},
		onShow(){
			var _this =this;
			_this.checkAuth();
			
		},
		
		methods: {
			ossurl,
			//判断
			checkAuth(){
				var  _this = this;
				uni.authorize({
				    scope: 'scope.camera',
				    success(res) {
				       console.log('已授权',res);
					 
				    },
					fail(err) {
				       console.log(err);
					   uni.showModal({
					     title: '授权失败',
					     content: '请在设置界面打开相摄像头关权限',
					     success: (res) => {
					       if (res.confirm) {
					         uni.openSetting()
					       }
					     }
					   })
				    },
				})
			},
		
			clearImg(){
				this.deletePic();
			},
			// 删除图片
			deletePic(event) {
					var _this = this; 
					_this.wxAvatar = [];
			},
			
						// 新增图片
			async afterRead(event) {
				
				var _this = this;
				console.log('event',event);	
				var edetail = event.file.thumb;
				if (edetail.indexOf('http://tmp') != -1 || edetail.indexOf('wxfile://tmp') != -1)
				{
					console.log(edetail);
							// var FSM = uni.getFileSystemManager();
							// FSM.readFile({
							// 	filePath: edetail,
							// 	encoding: "base64",
							// 	success: function(data) {
							// 		_this.info.imgBase64 = "data:image/png;base64," + data.data
							// 		_this.wxAvatar = [{url:edetail}];
							// 	},
							// 	fail: function(err){
							// 		console.log('http://tmp',err)
							// 	}
							// })
							//获取图片名字等信息 避免压缩后获取不到
							let filePath = edetail;
							
							let _date = new Date();
							let ext_name = filePath.substr(filePath.lastIndexOf('.'));
							let address = _date.getFullYear() + '' + (_date.getMonth() + 1) + '' + _date.getDate();
							let fileName = address + _date.getTime() + ext_name;
							const img_info = await getImgInfo(filePath);
							
							let { width, height } = img_info;
							let maxWidth = 800;
							if (width > maxWidth) {
								let scale = Math.ceil(width / maxWidth);
								height = Math.ceil(height / scale);
								width = Math.ceil(maxWidth);
							}
							let compress_path = '';
							compress_path = await compressImg(filePath, { compressedWidth: width }).catch((res) => {
								console.log('上传压缩失败', err);
							});
							compress_path = compress_path ? compress_path : filePath;
												
							_this.upload_img(compress_path, fileName);
						
				}
		
			},
			uploadFilePromise(url) {
					
			},
			loadData(){
		
			},
			async upload_img(filePath, fileName) {
				var _this =this;
				try {
					uni.showLoading({
						title: '图片上传中',
					});
					
					const { file_url = '' } = await photoUploadFile(filePath, fileName,'user_avatar')
						.finally(() => {
							uni.hideLoading();
						})
						.catch((res) => {
							console.log('ossUploadFile==', res);
							uni.$u.toast('图片上传失败!!');
						});
						
					if (!file_url) {
						uni.$u.toast('图片上传失败!!!!!');
						return;
					}
					console.log('success upload')
					console.log(file_url);
					_this.info.avatar = file_url;
					_this.wxAvatar = [{url:ossurl(file_url, 'user_face')}];
					updateUserInfo(_this.info).then(res => {
					    if (res.code != 200) {
							uni.$u.toast(res.msg);
					    }
						else
						{
							store.commit('userInfo/set_user_info', _this.info);
						}
						
					});
				} catch (err) {
					console.log('图片上传失败', err);
					uni.$u.toast('上传照片失败~~');
				
				}
			},
			//信息改变
			infoChange(e)
			{
				var _this = this;
				if(uni.$u.test.isEmpty(e))
				{
					uni.$u.toast('请输入正确的昵称信息');
					return;
				}
				_this.info['nick_name'] = e;
				updateUserInfo(_this.info).then(res => {
				    if (res.code != 200) {
						uni.$u.toast(res.msg);
				    }
					else
					{
						store.commit('userInfo/set_user_info', _this.info);
					}
				});
			},
			
			
		}
	}
</script>

<style lang="scss">
page{background: #F6F9F8;}
.container{padding:10rpx 20rpx;}
.form{ padding: 20rpx;
background: #FFFFFF;
border-radius: 24rpx 24rpx 24rpx 24rpx;
}
/*form基本元素*/
/*input_box*/
.input_box{ display: flex;flex-direction:row;  height: 100rpx; line-height: 100rpx; 
border-radius: 15rpx; margin: 20rpx auto;}

.i_box_1{ width: 25%;height: 100rpx; font-size: 28rpx; text-align: center; }
.i_box_2{width: 0.3%;height: 80rpx;   margin-top: 10rpx;}
.i_box_3{ height: 100rpx;min-width: 49.4%; width: auto;font-size: 26rpx;}
// .i_box_4{width: 0.3%;height: 80rpx; margin-top: 10rpx;}
// .i_box_5{width: 25%;height: 100rpx; text-align: center; font-size: 28rpx;} 
// .i_box_5 .u-icon{margin-top: 20rpx;}
// ::v-deep .i_box_5 .u-icon--right{flex-direction:column !important;}




/*特殊的 改变部分*/
.i_box_3x{height: 100rpx;min-width: 74.7%; width: auto;font-size: 26rpx;}
::v-deep  .u-input{ border:none !important;  margin-top: 10rpx;}
.up{ width: 100%; height: auto; display: flex; margin-top: 20rpx;}
.up .img{width:80%; }
.up .img .u-upload{ margin-left: 80rpx;}
.up .icon{ width:20%;}
::v-deep .i_box_3x .u-button--info{ background-color: transparent !important; border: none !important;  text-align: right !important;}
::v-deep .i_box_3x .u-button{display: block !important; padding:0rpx !important;}
::v-deep .u-upload__button{border-radius: 50% !important;}
::v-deep .u-upload__wrap__preview{border-radius: 50% !important;}


</style>
